<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mydiv2{
            visibility: hidden;
        }
    </style>
    <script>
        window.onload=function(){
            var mydiv=document.getElementById("mydiv");//DOM对象

            //innerHTML
            // console.log(mydiv.innerHTML);//输出div中的内容，如果有标签，输出整个标签
            // mydiv.innerHTML="<h3>我是h3</h3>";//将h3解析成h3标签

            //innerText
            // console.log(mydiv.innerText);//获取的是纯文本
            // mydiv.innerText="<h3>我是h3</h3>";//将h3标签当成了纯文本

            //textContent
            // console.log(mydiv.textContent);
            // mydiv.textContent="<h3>我是h3</h3>";//将h3标签当成了纯文本




            var mydiv2=document.getElementById("mydiv2");
            // 区别1：innerText无法返回隐藏元素的文本内容，而textContent可以返回
            // console.log(mydiv2.innerText);
            // console.log(mydiv2.textContent);

            // 区别2：innerText依赖于浏览器的显示，textContent依赖于代码的显示

            var mydiv3=document.getElementById("mydiv3");
            // console.log(mydiv3.innerText);
            console.log(mydiv3.textContent);

            //区别3：innerText将\n解析成换行,textContent解析成空格
            var mydiv4=document.getElementById("mydiv4");
            // mydiv4.innerText="我是姓\n熊的";
            mydiv4.textContent="我是姓\n熊的"


        };
      
    </script>
</head>
<body>
    <div id="mydiv">
        <p>p1</p>
    </div>

    <div id="mydiv2">嘿嘿</div>
    <div id="mydiv3"><div>我是熊振宇，我今年40岁了</div><div>腰也不行，腿也不行了</div><div>请吃999感冒灵</div></div>
    <div id="mydiv4"></div>


</body>
</html>